<template>
  <view class="my-file">
    <view class="content-box">
      <view class="sc-list" v-for="(item, index) in dataList" :key="index" @click="tapNav">
        <view class="left">
          <view class="name">{{ item.articleTitle }}</view>
          <view class="sub">
            {{ item.articleContent }}
            <view v-if="item.articleType == '1'" style="margin-top: 20rpx">
              <Jvideo :url="item.articleAttaUrl" height="200rpx" width="100%" />
            </view>
          </view>
          <view class="ab">
            <view class="li">
              <u-icon name="account" color="#909090"></u-icon>
              {{ item.userName }}
            </view>
            <view class="li">
              {{ item.upvoteCount }}
              赞
            </view>
            <view class="li">
              {{ item.commentCounts }}
              评论
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="loadStatus" @loadmore="getList('more')" />
  </view>
</template>

<script>
import { articleList } from '@/api/yuedu'
export default {
  data() {
    return {
      loadStatus: 'loadmore',
      dataList: [],
      searchValue: null,
      pageSize: 20,
      pageNum: 1
    }
  },
  onShow() {
    this.getData()
  },
  onPullDownRefresh() {
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    if (this.loadStatus !== 'nomore') {
      this.getData('more')
    }
  },
  methods: {
    getData(type) {
      if (type == 'more') {
        this.pageNum++
      } else {
        this.pageNum = 1
        this.dataList = []
      }
      this.loadStatus = 'loading'
      const query = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        status: '2',
        userId: this.$store.getters.userInfo.userId
      }
      if (this.searchValue) {
        query.articleTitle = this.searchValue
      }
      articleList(query).then((res) => {
        if (res.code === 200) {
          this.dataList = this.dataList.concat(res.rows || [])
          if (this.dataList.length >= res.total) {
            this.loadStatus = 'nomore'
          } else {
            this.loadStatus = 'loadmore'
          }
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.my-file {
  .content-box {
    background-color: #ffffff;
    margin: 10rpx 20rpx;
    border-radius: 15rpx;
    padding: 20rpx;
  }
  .sc-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px #f3f3f3 solid;
    padding: 30rpx 0;
    .left {
      .name {
        font-size: 16px;
      }
      .sub {
        font-size: 13px;
        color: #666;
        margin-top: 20rpx;
      }
      .ab {
        display: flex;
        color: #909090;
        font-size: 13px;
        margin-top: 20rpx;
        .li {
          margin-right: 30rpx;
          display: flex;
        }
      }
    }
  }
}
</style>
